<template>
  <el-drawer v-model="visibleDrawer" :destroy-on-close="true" :with-header="false" size="50%">
    <div class="drawer-header">
      <h3>{{ isDetailsMode ? '学生详情' : '编辑学生' }}</h3>
    </div>
    <el-form>
      <!-- 学生名称 -->
      <el-form-item label="学生名称:" style="width:50%;">
        <el-input style="width:300px !important" v-model="formStudent.nickName" :disabled="isDetailsMode"></el-input>
      </el-form-item>

      <!-- 班级名称 - 在详情模式下允许编辑 -->
      <el-form-item label="班级名称:" style="width:50%;">
        <el-select lable="" v-model="formStudent.classroomId" placeholder="请选择班级" @change="handleClassroomChange">
          <el-option v-for="item in classroomSelectList" :key="item.classroomId" :label="item.classroomName"
            :value="item.classroomId" />
        </el-select>
      </el-form-item>

      <!-- 邮箱 -->
      <el-form-item label="邮箱:" style="width:50%;">
        <el-input style="width:300px !important" v-model="formStudent.email" :disabled="isDetailsMode"></el-input>
      </el-form-item>

      <!-- 手机号码 -->
      <el-form-item label="手机号码:" style="width:50%;">
        <el-input style="width:300px !important" v-model="formStudent.phone" :disabled="isDetailsMode"></el-input>
      </el-form-item>

      <!-- 年龄 -->
      <el-form-item label="年龄:" style="width:50%;">
        <el-input style="width:300px !important" v-model="formStudent.age" :disabled="isDetailsMode"></el-input>
      </el-form-item>

      <!-- 性别 -->
      <el-form-item label="性别:" style="width:50%;">
        <el-radio-group v-model="formStudent.sex" :disabled="isDetailsMode">
          <el-radio :value="1">男</el-radio>
          <el-radio :value="0">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 微信 -->
      <el-form-item label="微信:" style="width:50%;">
        <el-input style="width:300px !important" v-model="formStudent.wechat" :disabled="isDetailsMode"></el-input>
      </el-form-item>

      <!-- 学校 -->
      <el-form-item label="学校:" style="width:50%;">
        <el-input style="width:300px !important" v-model="formStudent.schoolName" :disabled="isDetailsMode"></el-input>
      </el-form-item>

      <!-- 专业 -->
      <el-form-item label="专业:" style="width:50%;">
        <el-input style="width:300px !important" v-model="formStudent.majorName" :disabled="isDetailsMode"></el-input>
      </el-form-item>

      <!-- 简介 -->
      <el-form-item label="简介:" style="width:50%;">
        <el-input style="width:300px !important" v-model="formStudent.introduce" :disabled="isDetailsMode"></el-input>
      </el-form-item>

      <!-- 提交按钮 -->
      <el-form-item>
        <el-button class="student-button" type="primary" plain @click="onSubmit()">
          {{ isDetailsMode ? '保存' : '保存' }}
        </el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<script setup>
import { ref, reactive, inject } from 'vue';
import { editStudentService, getStudentDetailService, updateStudentClassroomService } from '@/apis/student'
import { ElMessage } from 'element-plus';

// 接收isDetailsMode属性
const props = defineProps({
  isDetailsMode: {
    type: Boolean,
    default: false
  }
});

const visibleDrawer = ref(false)
const formStudent = reactive({
  studentId: '',
  nickName: '',
  classroomId: '',
  classroomName: '',
  email: '',
  phone: '',
  age: 0,
  sex: 1,
  wechat: '',
  schoolName: '',
  majorName: '',
  introduce: '',
})
const handleClassroomChange = (classroomId) => {
  const selectedClassroom = classroomSelectList.value.find(
    item => item.classroomId === classroomId
  );
  if (selectedClassroom) {
    formStudent.classroomName = selectedClassroom.classroomName;
  }
};

const classroomSelectList = inject('classroomList', []);

async function open(studentId) {
  visibleDrawer.value = true
  for (const key in formStudent) {
    if (formStudent.hasOwnProperty(key)) {
      formStudent[key] = '';
    }
  }
  if (studentId) {
    const studentDetail = await getStudentDetailService(studentId)
    Object.assign(formStudent, studentDetail.data)
  }
}

defineExpose({
  open
})

function validate() {
  let msg = ''
  return msg
}

const emit = defineEmits(['success'])
async function onSubmit() {
  const errorMessage = '';
  // const errorMessage = validate()
  if (errorMessage) {
    ElMessage.error(errorMessage);
    return false
  }
  
  if (props.isDetailsMode) {
    // 如果是详情模式，只更新班级信息
    try {
      await updateStudentClassroomService({
        studentId: formStudent.studentId,
        classroomId: formStudent.classroomId,
        classroomName: formStudent.classroomName
      });
      ElMessage.success('班级更新成功');
      emit('success', 'edit');
    } catch (error) {
      ElMessage.error('班级更新失败');
    }
  } else {
    // 否则执行完整的编辑
    const fd = new FormData()
    for (let key in formStudent) {
      fd.append(key, formStudent[key])
    }
    console.log(formStudent)
    if (formStudent.studentId) {
      //编辑题目请求
      await editStudentService(fd)
      ElMessage.success('编辑成功')
      emit('success', 'edit')
    } 
  }
  visibleDrawer.value = false
}


</script>

<style lang="scss">
.student-button {
  width: 200px;
}

.drawer-header {
  padding: 20px;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}
</style>